<template>
  <div data-tauri-drag-region>
    <el-card shadow="always" style="background-color: #393939;color: #fff;height: 100%;border:0px;">
      <template #header>
        <div class="card-header">
          <span>设置</span>
        </div>
      </template>
      <el-form label-position="right" label-width="auto" :model="formSetting" style="max-width: 600px">

        <el-form-item label="倒计时开关">
          <el-switch v-model="formSetting.isShowCountdownTime" />
        </el-form-item>

        <el-form-item label="背景颜色">
          <el-color-picker color-format="hex" v-model="formSetting.homeBackground" show-alpha />
        </el-form-item>

        <el-form-item label="天">
          <el-input-number v-model="formSetting.countdownTimeDay" :min="0" :max="1" style="width: 100%" />
        </el-form-item>
        <el-form-item label="小时">
          <el-input-number v-model="formSetting.countdownTimeHour" :min="0" :max="24" style="width: 100%" />
        </el-form-item>
        <el-form-item label="分钟">
          <el-input-number v-model="formSetting.countdownTimeMinute" :min="0" :max="60" style="width: 100%" />
        </el-form-item>
        <el-form-item label="秒钟">
          <el-input-number v-model="formSetting.countdownTimeSecond" :min="0" :max="60" style="width: 100%" />
        </el-form-item>

        <el-form-item label="滚动文字">
          <el-input v-model="formSetting.marqueeText" clearable />
        </el-form-item>

        <el-form>
          <el-form-item label="滚动速度">
            <template #label>
              <el-tooltip class="item" effect="dark" content="数字越小速度越快" placement="left">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
              <span>滚动速度</span>
            </template>
            <el-input-number v-model="formSetting.marqueeDuration" :min="1" :max="60"
              style="width: 100%"></el-input-number>
          </el-form-item>
        </el-form>

      </el-form>
      <template #footer>
        <el-button info @click="extiWindow">退出</el-button>
        <el-button type="primary" @click="onSubmit">设置</el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { appWindow } from '@tauri-apps/api/window';
import { emit } from '@tauri-apps/api/event';
import storageUtil from '@/utils/storageUtil';
import { ref, reactive } from 'vue'
const formSetting = reactive({
  isShowCountdownTime: false,
  countdownTimeDay: 0,
  countdownTimeHour: 0,
  countdownTimeMinute: 0,
  countdownTimeSecond: 0,
  marqueeText: '',
  marqueeDuration: 5,
  homeBackground: '#fff',
})

let homeBackgroundStorage = storageUtil.getFromLocalStorage('homeBackground');
if (homeBackgroundStorage != null) {
  formSetting.homeBackground = homeBackgroundStorage;
}

let isShowCountdownTimeStorage = storageUtil.getFromLocalStorage('isShowCountdownTime');
// console.log('isShowCountdownTimeStorage', isShowCountdownTimeStorage)
if (isShowCountdownTimeStorage != null) {
  let isShowCountdownTimeBoolean = JSON.parse(isShowCountdownTimeStorage); // false 字符串转boolean
  formSetting.isShowCountdownTime = isShowCountdownTimeBoolean;
}

let countdownTimeDayStorage = storageUtil.getFromLocalStorage('countdownTimeDay');
if (countdownTimeDayStorage != null) {
  formSetting.countdownTimeDay = Number(countdownTimeDayStorage);
}

let countdownTimeHourStorage = storageUtil.getFromLocalStorage('countdownTimeHour');
if (countdownTimeHourStorage != null) {
  formSetting.countdownTimeHour = Number(countdownTimeHourStorage);
}

let countdownTimeMinuteStorage = storageUtil.getFromLocalStorage('countdownTimeMinute');
if (countdownTimeMinuteStorage != null) {
  formSetting.countdownTimeMinute = Number(countdownTimeMinuteStorage);
}

let countdownTimeSecondStorage = storageUtil.getFromLocalStorage('countdownTimeSecond');
if (countdownTimeSecondStorage != null) {
  formSetting.countdownTimeSecond = Number(countdownTimeSecondStorage);
}

let marqueeTextStorage = storageUtil.getFromLocalStorage('marqueeText');
if (marqueeTextStorage != null) {
  formSetting.marqueeText = marqueeTextStorage;
}

let marqueeDurationStorage = storageUtil.getFromLocalStorage('marqueeDuration');
if (marqueeDurationStorage != null) {
  formSetting.marqueeDuration = Number(marqueeDurationStorage);
}

const onSubmit = async () => {
  storageUtil.saveToLocalStorage('isShowCountdownTime', formSetting.isShowCountdownTime);
  storageUtil.saveToLocalStorage('countdownTimeDay', formSetting.countdownTimeDay);
  storageUtil.saveToLocalStorage('countdownTimeHour', formSetting.countdownTimeHour);
  storageUtil.saveToLocalStorage('countdownTimeMinute', formSetting.countdownTimeMinute);
  storageUtil.saveToLocalStorage('countdownTimeSecond', formSetting.countdownTimeSecond);
  storageUtil.saveToLocalStorage('marqueeText', formSetting.marqueeText);
  storageUtil.saveToLocalStorage('marqueeDuration', formSetting.marqueeDuration);
  storageUtil.saveToLocalStorage('homeBackground', formSetting.homeBackground);
  let plus = 0;
  if (formSetting.countdownTimeDay > 0) {
    plus = formSetting.countdownTimeDay * 24 * 60 * 60;
  }
  if (formSetting.countdownTimeHour > 0) {
    plus = plus + formSetting.countdownTimeHour * 60 * 60;
  }
  if (formSetting.countdownTimeMinute > 0) {
    plus = plus + formSetting.countdownTimeMinute * 60;
  }
  if (formSetting.countdownTimeSecond > 0) {
    plus = plus + formSetting.countdownTimeSecond;
  }
  // console.log('plus', plus);
  let jsTime = new Date().getTime() + plus * 1000; // 以毫秒为单位的时间戳
  const date = new Date(jsTime);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，需要加1
  const day = date.getDate();
  const hours = date.getHours();
  const min = date.getMinutes();
  const seconds = date.getSeconds();

  const timeString = `${year}-${month}-${day} ${hours}:${min}:${seconds}`;
  storageUtil.saveToLocalStorage('countdownTime', timeString);

  // 点击事件
  let eventParam = {
    isShowCountdownTime: formSetting.isShowCountdownTime,
    countdownDeadline: timeString,
    marqueeText: formSetting.marqueeText,
    marqueeDuration: formSetting.marqueeDuration,
    homeBackground: formSetting.homeBackground,
  };
  await emit('home-event', eventParam);
  await emit('system-event', false); //设置按钮的状态
  appWindow.close();
}



//关掉窗口
const extiWindow = async () => {
  appWindow.close();
  await emit('system-event', false); //设置按钮的状态
}
</script>

<style scoped>
/* .card-header {
  border-bottom: 1px solid #e4e7ed17;
} */

/deep/ .el-card__header {
  border-bottom: 1px solid #e4e7ed17;
}

/deep/ .el-card__footer {
  border-top: 0;
  text-align: right;
}

/deep/ .el-form-item__label {
  color: #fff;
}

/* :deep(.el-card__header) {
  border-bottom: 1px solid #e4e7ed17;
}

:deep(.el-card__footer) {
  border-top: 0;
  text-align: right;
}

:deep(.el-form-item__label) {
  color: #fff;
} */
</style>